<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png"></image> -->
		<!-- 头部 -->
		<view>
			<view>
				<view>{{ parttimeVo.parttimeTitle }}</view>
			</view>
			<view class="top">
				<!-- <text class="title">{{title}}</text> -->
				<view class="money">
					<view>{{parttimeVo.parttimeLable}}</view>
					<view class="tag">{{parttimeVo.parttimeLable}}</view>
				</view>
				<view class="salary">{{parttimeVo.parttimeMoney}}</view>
			</view>
		</view>
		<!-- 职位位详情 -->
		<view class="bodybig">
			<view>
				<view>职位详情</view>
				<view class="body">
					<view>{{parttimeVo.parttimeLable}}</view>
					<view class="body-1">{{parttimeVo.parttimeLable}}</view>
				</view>
			</view>
			<view class="body-2">
				<view>{{parttimeVo.categoryContent}}</view>
			</view>
		</view>
		<!-- 时间及地址 -->
		<view class="time">
			<view>工作时间：{{parttimeVo.parttimeStart}} --- {{parttimeVo.parttimeEnd}}</view>
			<view class="location">工作地点：{{parttimeVo.parttimeSeat}}</view>
			<view>商家名：{{parttimeVo.parttimeCompanyName}}</view>
		</view>
		<!-- 收藏及联系 -->
		<view class="collect">
			<view class="box">收藏</view>
			<view class="box">联系商家</view>
		</view>
	</view>


</template>

<script>
	import index from "@/static/js/api/parttimeDetial.js"
	export default {
		
		data() {
			return {
				options:null,
				parttimeVo: {
					parttimeTitle: "但嗲夺取鸡蛋清",
					parttimeMoney: "8K-13K",
					parttimeLable: "性别",
					categoryContent: "胆大基本都几把九点半",
					parttimeStart: "8:00",
					parttimeEnd: "18:00",
					parttimeSeat: "成都",
					parttimeCompanyName: "万息",
				},
			}
		},
		onLoad(e) {
			this.options=e.parttimeId;
			this.getParttimeDetil()
		},
		methods: {
			getParttimeDetil() {
				console.log(this.options)
				index.getParttimeDetil(this.options).then((res) => {
					this.parttimeVo = res.data[0]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// *{
	// 	border: 1px red solid;
	// }
	.content {
		;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	// 头部scss
	.top {
		display: flex;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		justify-content: space-between;
		border-bottom: 1rpx black solid;

		.money {
			font-size: 24rpx;
			display: flex;
			justify-content: space-around;

			.tag {
				margin-left: 20rpx;
			}
		}

		.salary {
			font-size: 50rpx;
		}

	}

	// 职位详情scss
	.bodybig {
		border-bottom: 1rpx black solid;
	}

	.body {
		display: flex;
		justify-content: flex-start;
		margin-left: 20rpx;
	}

	.body-1 {
		margin-left: 20rpx;
	}

	.body-2 {
		font-size: 24rpx;
		margin-top: 100rpx;
		margin-bottom: 100rpx;
	}

	// 时间及地址scss
	.time {
		border-bottom: 1rpx black solid;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}

	.location {
		margin-top: 50rpx;
		margin-bottom: 50rpx;
	}

	// 收藏scss
	.collect {
		display: flex;
		justify-content: space-between;

		.box {
			border: 1px black solid;
			padding-left: 60rpx;
			padding-right: 60rpx;
			padding-top: 20rpx;
			padding-bottom: 20rpx;
			display: flex;
			align-items: center;
		}
	}
</style>
